<template>
    <view class="header space-between align-center ft-30 t-3" :style="{ height: height }">
        <view class="flex-auto align-center">
            <view class="center pl-30 pr-30" @click="handleSort">
                <text class="mr-8">积分</text>
                <hj-image
                    mode="aspectFill"
                    :src="sortIcon"
                    width="30rpx"
                    height="30rpx"
                    :isLoad="false"
                />
            </view>
            <view class="pl-30 pr-30 center" :class="{ red: isRedeemable }" @click="handleExchange">
                <hj-image
                    mode="aspectFill"
                    :src="isRedeemable ? 'exchange-02.png' : 'exchange-01.png'"
                    width="32rpx"
                    height="32rpx"
                    :isLoad="false"
                />
                <text class="ml-8">我可兑换</text>
            </view>
        </view>
        <view class="center pr-30 pl-30" @click="handleOrder">
            <hj-image mode="aspectFill" src="order-01.png" width="32rpx" height="32rpx" />
            <text class="ml-8">我的订单</text>
        </view>
    </view>
</template>

<script setup>
/**
 * @description 商品筛选条件
 * @author yinzhi
 * @date 2025-03-17
 */
import { computed, defineComponent } from 'vue'

defineComponent({
    name: 'FilerHead'
})

const props = defineProps({
    // 头部高度
    height: {
        type: String,
        default: '80rpx'
    },
    // 排序
    sort: {
        type: [Number, String],
        default: ''
    },
    isRedeemable: {
        type: Boolean,
        default: false
    }
})

// 排序图标
const sortIcon = computed(() => {
    let img = {
        1: 'sort-03.png', //升序
        2: 'sort-04.png', //降序
        0: 'sort-default-02.png' //默认不排序图
    }
    return img[props.sort] || img[0]
})

const emit = defineEmits()

// 排序
const handleSort = () => {
    let sort = props.sort
    if (sort === 1) {
        emit('onSort', 2)
    } else if (sort === 2) {
        emit('onSort', '')
    } else {
        emit('onSort', 1)
    }
}

// 是否筛选可兑换的商品
const handleExchange = () => {
    emit('onExchange')
}

// 我的订单
const handleOrder = () => {
    uni.navigateTo({
        url: '/pages/order/order-list/index'
    })
}
</script>

<style scoped lang="scss">
.header {
    border-bottom: 1px solid #eeeeee;
    box-shadow: 0 0 10rpx 0 rgba($color: #000000, $alpha: 0.1);
    .red {
        color: #e51c23;
    }
}
</style>
